<template>
  <div>
    <!-- 头部栏 -->
    <MyHeader
      :background="'blue'"
      :fontColor="'white'"
      title="TabBar案例"
    ></MyHeader>
    <div class="main">
      <!-- 点击底部导航, 切换页面组件显示 -->
      <!-- components 中 is属性值就代表你想要切换的组件名 -->
      <components :is='ComName'></components>
    </div>
    <!-- 底部导航 父向子传参（tabList） -->
    <MyTabBar :list='tabList' @ChangName='ChangNameFn'></MyTabBar>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyTabBar from './components/MyTabBar.vue'
import MyUserInfo from './views/MyUserInfo.vue'
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue' 

export default {
  data() {
    return {
      //给ComName设置一个默认值
      ComName:'MyGoodsList',
      tabList: [
        {
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
          componentName: "MyGoodsList",
        },
        {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "MyGoodsSearch",
        },
        {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "MyUserInfo",
        },
      ],
    };
  },
  components:{
    MyHeader,
    MyTabBar,
    MyUserInfo,
    MyGoodsList,
    MyGoodsSearch
  },
  methods:{
    ChangNameFn(componentName){
      // MyTabBar里选出来的组件名赋予给is属性的comName 实现组件的切换
      this.ComName = componentName;
    }
  }
};
</script>

<style>
.main{
   padding-top: 45px;
  padding-bottom: 51px;
}
</style>